<template>
    <div style="width: 1000px;height: 600px;margin: auto">
      <el-page-header @back="goBack" content="个人信息">
      </el-page-header>
        <div v-if="temp">
            <div>
                <div style="width: 500px;float: left">
                    <p style="font-size: 25px">欢迎：{{form.name}}</p>
                    <p> 电话：{{form.phone}}</p>
                    <p>职业：{{form.region}}</p>
                    <p>出生日期：{{form.date1}}</p>

                    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
                        <p style="text-align: center;font-size: 30px">个人简介</p>
                        <span>{{form.desc}}</span>
                    </div>
                </div>
                <div style="width: 500px;float: right">
                    <el-calendar v-model="value">
                    </el-calendar>
                </div>

            </div>
            <el-tag v-for="s in form.type" :key="s">{{s}}</el-tag>
            <div>
                <el-button type="primary" @click="showFrom" style="margin-top: 30px">修改信息</el-button>
            </div>


        </div>

        <div v-else>
            <el-form ref="form" :model="form" label-width="80px">

                <el-form-item label="昵称">
                    <el-input v-model="form.name" style="width: 120px"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.phone" style="width: 321px"></el-input>
                </el-form-item>
                <el-form-item label="职业">
                    <el-select v-model="form.region" placeholder="请选择职业">
                        <el-option label="白领" value="白领"></el-option>
                        <el-option label="工人" value="工人"></el-option>
                        <el-option label="学生" value="学生"></el-option>
                        <el-option label="教师" value="教师"></el-option>
                        <el-option label="农民" value="农民"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出生日期:">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" value-format="yyyy-mm-dd"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="是否公开">
                    <el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="个人标签">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="经验丰富" name="type"></el-checkbox>
                        <el-checkbox label="乐于助人" name="type"></el-checkbox>
                        <el-checkbox label="有问必答" name="type"></el-checkbox>
                        <el-checkbox label="善于提问" name="type"></el-checkbox>
                        <el-checkbox label="待人友善" name="type"></el-checkbox>
                        <el-checkbox label="有求必应" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="个人简介">
                    <el-input type="textarea" v-model="form.desc">
                        <span> {{form.desc}}</span>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即修改</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  methods: {
    onSubmit() {
      this.temp = true
      console.log('submit!');
    },
    showFrom() {
      this.temp = false;
    },
    goBack() {
      window.location = "index.html"
    }
  },
  data() {
    return {
      temp: true,
      form: {
        name: '张三',
        phone: '166xxxx4512',
        region: '学生',
        date1: '2000-12-30',
        date2: '',
        delivery: false,
        type: ["有求必应"],
        resource: '',
        desc: '用心主动独立性强具有高度的职责感和敬业精神，待人真诚诚实守信团结协作意识强，能够吃苦耐劳，勇于挑战新事物，具有务必的开拓创新潜力，“踏实做事，诚实做人”是我为人处世的原则。忠实诚信，讲原则，说到做到，决不推卸职责;有自制力，做事情始终坚持有始有终，从不半途而废;肯学习，有问题不逃避，愿意虚心向他人学习;自信但不自负，不以自我为中心;愿意以谦虚态度赞扬接纳优越者，权威者;会用%的热情和精力投入到工作中;平易近人。为人诚恳，性格开朗，用心进取，适应力强勤奋好学脚踏实地，有较强的团队精神，工作用心进取，态度认真。'
      }

    }
  },
}
</script>

<style>

</style>
